<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <div>
            <img src="http://192.168.0.2/index/weather" alt="" srcset="">
        </div>
        <h1>图书馆大数据平台</h1>
        <i></i>
        <div>时间</div>
    </header>
    <div class="mainbox">
        <div class="column">
            <div class="panel">
                <div class="timeTitle">
                    <div class="titleSetType">
                        <i></i>
                        <h1>入馆趋势</h1>
                    </div>
                    <div class="OpeningTime">
                        <i></i>
                        <span>开馆时间: 07:00 - 22:00</span>
                    </div>
                </div>
                <div class="bigEcharts">
                    <div class="line"></div>
                </div>
                <ul class="AttendanceTrendNum">
                    <li>
                        <span>当天到馆人次</span>
                        <span>
                            <span>990</span>
                            <i>人</i>
                        </span>
                    </li>
                    <li>
                        <span>前一天到馆人次</span>
                        <span>
                            <span>990</span>
                            <i>人</i>
                        </span>
                    </li>
                    <li>
                        <span>当前到馆人次</span>
                        <span>
                            <span>990</span>
                            <i>人</i>
                        </span>
                    </li>
                    <li>
                        <span>本周到馆人次</span>
                        <span>
                            <span>990</span>
                            <i>人</i>
                        </span>
                    </li>
                    <li>
                        <span>累计到馆人次</span>
                        <span>
                            <span>990</span>
                            <i>人</i>
                        </span>
                    </li>
                </ul>
                <div class="ServicePersonTime">
                    <ul>
                        <li>
                            <img src="./images/person_time1.png" alt="">
                            <p>
                                <i>本年服务人次</i>
                                <span>1084439人</span>
                            </p>
                        </li>
                        <li>
                            <img src="./images/person_time2.png" alt="">
                            <p>
                                <i>本年服务人次</i>
                                <span>1084439人</span>
                            </p>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- 借阅排行 -->
            <div class="panel">
                <!-- 左边内容 -->
                <div class="LendingRanking">
                    <div>
                        <div class="titleSetType">
                            <i></i>
                            <h1>借阅排行</h1>
                        </div>
                        <!-- 借阅排行左下边 -->
                        <div class="rankingSpecific">
                            <img src="../images/top1.png" alt="">
                            <div>
                                <span class="line"></span>
                                <ul>
                                    <li>
                                        <span>杨晓</span>
                                        <span>教育学院</span>
                                    </li>
                                    <li>
                                        <span>借阅量</span>
                                        <span>224次</span>
                                    </li>
                                    <li>
                                        <span>入馆量</span>
                                        <span>1次</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="rankingSpecific rankingSpecifics">
                        <img src="../images/top2.png" alt="">
                        <div>
                            <span class="line"></span>
                            <ul>
                                <li>
                                    <span>杨晓</span>
                                    <span>教育学院</span>
                                </li>
                                <li>
                                    <span>借阅量</span>
                                    <span>224次</span>
                                </li>
                                <li>
                                    <span>入馆量</span>
                                    <span>1次</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="rankingSpecific rankingSpecificss">
                        <img src="../images/top3.png" alt="">
                        <div class="box">
                            <span class="line"></span>
                            <ul>
                                <li>
                                    <span>杨晓</span>
                                    <span>教育学院</span>
                                </li>
                                <li>
                                    <span>借阅量</span>
                                    <span>224次</span>
                                </li>
                                <li>
                                    <span>入馆量</span>
                                    <span>1次</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="review_box">
                    <!-- 右边内容 -->
                    <ul id="comment1">
                        <li>
                            <div class="LendingRankingRight">
                                <i>1</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>2</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>3</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>4</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>5</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>6</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>7</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>8</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>9</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>9</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>9</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="LendingRankingRight">
                                <i>9</i>
                                <p>
                                    <span>李成慧（基础教育过基础教育过）</span>
                                    <span>借阅量: 74次</span>
                                    <span>入馆次: 0次</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <ul id="comment2"></ul>
                </div>

            </div>
        </div>
        <div class="column">
            <!-- 借阅趋势 -->
            <div class="panel">
                <div class="BorrowingTrend">
                    <div style="width: 37%;">
                        <div class="titleSetType">
                            <i></i>
                            <h1>借阅趋势</h1>
                        </div>
                        <ul class="BorrowingTrendul">
                            <li>
                                <img src="../images/trend_1.png" alt="">
                                <div class="ReadToday">
                                    <span>今日借阅量</span>
                                    <span>
                                        <i>1899</i>
                                        <span>本</span>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <img src="../images/trend_2.png" alt="">
                                <div class="ReadToday">
                                    <span>昨日借阅量</span>
                                    <span>
                                        <i>2218</i>
                                        <span>本</span>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <img src="../images/trend_3.png" alt="">
                                <div class="ReadToday">
                                    <span>本周借阅量</span>
                                    <span>
                                        <i>953</i>
                                        <span>本</span>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <img src="../images/trend_4.png" alt="">
                                <div class="ReadToday">
                                    <span>年度借阅量</span>
                                    <span>
                                        <i>26755</i>
                                        <span>本</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="barLine">
                        <!-- 上边条形图 -->
                        <div class="barLineTop">
                            <span class="span1">
                                <span>借出量</span>
                                <i></i>
                            </span>
                            <!-- <span class="span2">
                                <span>借出量</span>
                                <i></i>    
                            </span> -->
                            <div class="LendAmount">
                                <ul>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip1.png" alt="">
                                            <span>今日借出</span>
                                        </span>
                                        <span>
                                            <i>1090</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip1.png" alt="">
                                            <span>昨日借出</span>
                                        </span>
                                        <span>
                                            <i>1234</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip1.png" alt="">
                                            <span>本月借出</span>
                                        </span>
                                        <span>
                                            <i>3264</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip1.png" alt="">
                                            <span>本年借出</span>
                                        </span>
                                        <span>
                                            <i>16987</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                </ul>
                                <!-- 图表 -->
                                <div class="LendAmountNum">
                                    <i>30</i>
                                    <i>20</i>
                                    <i>30</i>
                                    <i>40</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                </div>
                                <div class="LendAmountLine"></div>
                                <div class="LendAmountLineBottom"></div>

                                <div class="LendAmountNum LendAmountNums">
                                    <i>30</i>
                                    <i>20</i>
                                    <i>30</i>
                                    <i>40</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                    <i>50</i>
                                </div>
                                <ul class="textColor">
                                    <li>
                                        <span>
                                            <img class="iconImg" src="http://192.168.0.2/static/images/default/tip2.png"
                                                alt="">
                                            <span>今日借出</span>
                                        </span>
                                        <span class="spanColor">
                                            <i>1090</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip2.png"
                                                alt="">
                                            <span>昨日借出</span>
                                        </span>
                                        <span class="spanColor">
                                            <i>1234</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip2.png"
                                                alt="">
                                            <span>本月借出</span>
                                        </span>
                                        <span class="spanColor">
                                            <i>3264</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>
                                            <img class="iconImg" src="../images/tip2.png"
                                                alt="">
                                            <span>本年借出</span>
                                        </span>
                                        <span class="spanColor">
                                            <i>16987</i>
                                            <span>本</span>
                                        </span>
                                    </li>
                                </ul>
                                <span class="AlsoQuantity">
                                    <span>还入量</span>
                                    <i></i>
                                </span>
                            </div>
                        </div>
                        <!-- 下方条形图 -->
                        <!-- <div class="barLineBottom">下部分条形</div> -->
                    </div>

                </div>
            </div>
            <!-- 展示 -->
            <div class="BigDataDisplay">
                <!-- 实时借阅书籍展示 上部分 -->
                <div class="borrowTimeBook">
                    <!-- 顶部 -->
                    <div class="borrowTimeBookTitle">
                        <span>实时借阅书籍展示</span>
                        <img src="../images/item_border_tip.png" alt="">
                    </div>
                    <!-- 下部 -->
                    <div class="containerBox">
                        <ul class="container">
                            <li><img src="./images/book.png" /></li>
                            <li><img src="./images/book1.png" /></li>
                            <li><img src="./images/book.png" /></li>
                            <li><img src="./images/book1.png" /></li>
                            <li><img src="./images/book.png" /></li>
                            <li><img src="./images/book1.png" /></li>
                        </ul>
                    </div>
                </div>
                <!-- 下部分 -->
                <div class="dataStatisticsTrait">
                    <!-- 年度数据统计 -->
                    <div class="dataStatistics">
                        <div class="dataStatisticsTrait">
                            <i></i>
                            <h1>年度数据统计</h1>
                        </div>
                        <!-- 柱状图 -->
                        <div class="histogramBarGraph">
                            <!-- 左边柱状图 -->
                            <div class="BarGraphLeft">
                                <div class="BarGraphLeftTop">
                                    <span>本年度借还总数</span>
                                    <i>26,755</i>
                                </div>
                                <div class="BarGraphLeftBottom">
                                    <span></span>
                                    <span>
                                        <span></span>
                                    </span>
                                </div>
                            </div>
                            <!-- 右边柱状图 -->
                            <div class="BarGraphBottom">
                                <div class="BarGraphLeftBottom">
                                    <span></span>
                                    <span>
                                        <span></span>
                                    </span>
                                </div>
                                <div class="BarGraphLeftTop">
                                    <span>本年度借还总数</span>
                                    <i>26,755</i>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="bottomLine"></div> -->
                    </div>
                    <!-- 本馆风采 -->
                    <div class="trait">
                        <div class="dataStatisticsTrait">
                            <i></i>
                            <h1>本馆风采</h1>
                        </div>
                        <img src="../images/library_show_1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!--  -->
            <div class="rightTop">
                <!-- 五大类馆藏占比 -->
                <div class="collectionRatio">
                    <div class="titleSetType">
                        <i></i>
                        <h1>五大类馆藏占比</h1>
                    </div>
                    <!-- 具体占比 -->
                    <div class="specificProportion">
                        <ul>
                            <li>
                                <span>
                                    <i></i>
                                    <span>马列毛恩</span>
                                </span>
                                <span>5%</span>
                            </li>
                            <li>
                                <span>
                                    <i></i>
                                    <span>哲学</span>
                                </span>
                                <span>7%</span>
                            </li>
                            <li>
                                <span>
                                    <i></i>
                                    <span>社会科学</span>
                                </span>
                                <span>69%</span>
                            </li>
                            <li>
                                <span>
                                    <i></i>
                                    <span>自然科学</span>
                                </span>
                                <span>18%</span>
                            </li>
                            <li>
                                <span>
                                    <i></i>
                                    <span>综合性图书</span>
                                </span>
                                <span>5%</span>
                            </li>
                        </ul>
                        <div class="collectionPie">
                            <span>种类占比</span>
                            <div class="collectionPies">

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 流通占比 -->
                <div class="circulationRatio">
                    <div class="titleSetType">
                        <i></i>
                        <h1>流通占比</h1>
                    </div>
                    <div class="circulationRatioPie"></div>
                </div>
            </div>
            <!-- 热门推荐 -->
            <div class="panel panelHot">
                <div class="titleSetType">
                    <i></i>
                    <h1>热门推荐</h1>
                </div>
                <!-- 热门推荐详情 -->
                <div class="HotRecommendationDetails">
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>

                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>

                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                    <div class="HotRecommendationDetailsItem">
                        <i>top1</i>
                        <h4>论语易读</h4>
                        <span>借阅数 41</span>
                        <img src="../images/borrow_1.png" alt="" srcset="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/flexible.js"></script>
    <script src="./js/eharts.min.js"></script>
    <script src="./js/empile.js"></script>
    <script src="./js/index.js"></script>

    <script>

    </script>
</body>

</html>